<template>
  <view class="card-info">
    <view class="top-info">
      <view class="top-info-a">商品销售</view>
      <view style="flex:1"></view>
      <view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">近七天
      </view>
      <view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">近一月
      </view>
      <view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">近三月
      </view>
      <view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">近半年
      </view>
    </view>
    <view class="list">
      <view v-for="(item,index) in info" :key="index">
        <view class="good-info">
          <view class="good-info1">
            <img class="img1" v-if="index == 0" src="@/static/image/icons/icon-one.png"/>
            <img class="img1" v-else-if="index == 1" src="@/static/image/icons/icon-two.png"/>
            <img class="img1" v-else-if="index == 2" src="@/static/image/icons/icon-three.png"/>
            <view v-else class="word-a">{{ index + 1 }}</view>
          </view>
          <view class="good-info2" style="display: flex">
            <img class="img2" :src="item.commodityCover"/>
            <view>
              <view class="word-b">{{ item.commodityName }}</view>
              <view class="word-c"><view class="word-d">¥</view>{{ item.sellPrice }}</view>
            </view>
          </view>
          <view class="word-e">{{ item.numSales }}人购买</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      selectIndex: 4,
      option: {},
      info: []
    };
  },
  mounted() {
    let that = this
    setTimeout(function () {
      that.initData()
    }, 500)
  },
  methods: {
    initData() {
      this.info = []
      this.$api.peopleGoodsSale({dateType: this.selectIndex}).then(res => {
        this.info = res.data;
      });
    },
    selectChange(index) {
      this.selectIndex = index
      this.initData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

.list{
  padding: 50rpx 0;
}

.good-info {
  display: flex;
  align-items: center;
  height: 150rpx;
  padding-top: 20rpx;

  .good-info1{
    width: 100rpx;
    text-align: center;
  }

  .good-info2{
    flex: 1;
    padding-left: 20rpx;
  }

  .img1 {
    width: 42rpx;
    height: 55 rpx;
  }

  .img2 {
    width: 97rpx;
    height: 97rpx;
    border-radius: 10rpx;
    margin-right: 15rpx;
  }

  .word-a {
    font-size: 34rpx;
    color: #0061FF;
  }

  .word-b {
    font-size: 24rpx;
    font-weight: bold;
    color: #333333;
    padding-top: 10rpx;
  }

  .word-c {
    padding-top: 30rpx;
    font-size: 14rpx;
    font-weight: 400;
    color: #E52F2F;
    display: flex;
    .word-d {
      font-size: 10rpx;
      color: #E52F2F;
      margin: 0 5rpx 15rpx 0;
    }
  }



  .word-e {
    font-size: 14rpx;
    font-weight: 400;
    color: #A8A8A8;
  }
}

</style>
